<template>
  <div class="page_content daraBoardLint_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title">排行榜</div>
    </div>
    <div class="main_box p-10 grid">
      <div v-for="(item, inx) in streetList" :key="inx" class="main_box_item mb-15 flex flex-ac">
        <div class="main_box_item_inx flex flex-jc flex-ac"> {{ inx }}</div>
        <div class="title pr-10">{{ item.name }}</div>
        <el-progress :text-inside="true" :stroke-width="16" :percentage="item.value"
          class="el-bg-inner-running flex-1"></el-progress>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
const store = useStore();

const props = defineProps<{}>();
const iconPng = new URL("@/assets/img/index/pf.png", import.meta.url).href;
const streetList = ref([
  {
    name: "园区xxx",
    value: 80,
  },
  {
    name: "园区xxx",
    value: 20,
  },
  {
    name: "园区xxx",
    value: 40,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
  {
    name: "园区xxx",
    value: 30,
  },
]);

onMounted(() => { });

onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.daraBoardLint_content {
  height: 250px;

  .main_box {
    height: calc(250px - 35px);
    overflow-y: auto;

    .main_box_item {
      .main_box_item_inx {
        width: 26px;
        height: 26px;
        font-size: 12px;
        background: #f2f2f2;
        border-radius: 50%;
        margin-right: 4px;
        overflow: hidden;
      }

      .title {
        // width: 100px;
      }
    }

    .main_box_item:last-child {
      margin-bottom: 0;
    }
  }
}

.main_box::v-deep {

  /* 渐变进度条 */
  .el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #1890ff, #7dd6ff) !important;
  }
}
</style>